<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,
              maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" 
              href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.css">
        <link rel="stylesheet" 
              href="http://api.maps.nokia.com/mobile/1.0.2/lib/colors.css">
    </head>
    <body class="mh5_hwacc_body">
        <script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">
        </script>

        <div id="mapContainer"
             style="height: 455px;position: relative; overflow-y: scroll;">
        </div>

        <script>
            try {
                nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/1.0.2/lib/";
                nokia.mh5.appId = "WWBhk8vY55zMEt183rtB";
                nokia.mh5.appCode = "QDGrEnrAI3W1urgWR-ei3Q";
                var apitem = JSON.parse(APInfo.toJSON());
                var currentPoi;
                var map = new nokia.mh5.components.Map({
                    center: {
                        longitude: apitem.longitude,
                        latitude: apitem.lantitude
                    },
                    zoom: 17,
                    schema: "normal.day.traffic",
                    tracking: true,
                    listeners: {
                        poiclick: function(e) {/* your listener */
                            this.showInfoBubble(e.data[0]);
                        },
                        mapmovestart: function() {/* your listener */
                        },
                        mapmoveend: function() {/* your listener */
                        },
                        mapclick: function(e) {
//                        nokia.mh5.components.InfoBubble(poi, {
//                            content: ["title", "description", "rating"],
//                            borderRadius: 12,
//                            backgroundColor: "rgba (0,46,184,0.85)",
//                            maxWidth: 245
//                        }, function(b) {
//
//                        });
                        },
                        mapdblclick: function(e) {/* your listener */
                        },
                        maplongpress: function(e) {/* your listener */
                        },
                        maptrackingstart: function() {/* your listener */
                        },
                        maptrackingend: function() {/* your listener */
                        },
                        mapzoomchange: function(e) {/* your listener */
                        }
                    }
                });
                var img;
                if (apitem.type === 0) {
                    img = "imgs/ic_map_wifi_free.png";
                } else {
                    img = "imgs/ic_map_wifi_lock.png";
                }
                map.createPoi(
                        img, {
                    longitude: apitem.longitude,
                    latitude: apitem.lantitude,
                    name: "ssid:" + apitem.ssid
                });

                document.getElementById("mapContainer").appendChild(map.root);
            } catch (e) {
                alert(e);
            }
        </script>
    </body>
</html>